<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Password Generator</title>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css"
      integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU"
      crossorigin="anonymous"
    />
    <style>
      img {
        height: 25px;
        width: 25px;
      }
      .form-check,
      .form-input {
        margin-top: 3rem;
      }
      
    </style>
  </head>
  <body>
    <div class="main__wrapper d-flex justify-content-center p-2">
      <!-- ---------------------------------------
            ---------------------------------------------------------- -->
      <div class="card text-justify pb-5" style="width: 80%">
        <div class="card-body">
          <h1 style="font-style: italic;">
            Pas<span class="text-danger" >Sword</span> 
            <img src="./img/sword.png" alt="" height="25px" width="25px" />
          </h1>
          <h6 class="card-subtitle mb-2 mt-2 text-muted">
            The ultimate password generation sword!
          </h6>

          <p class="mt-4 bg-light p-2 border">
            Dip the iron in the elixir of cryptography and generate a password
            for yourself:
            <img src="./img/smoke.png" alt="" />
          </p>
          <div class="addons">
            <!-- ---------------------------------------
            ---------------------------------------------------------- -->
            <!--  numbers -->
            <div class="form-check">
              <input
                class="form-check-input"
                type="checkbox"
                value=""
                id="numbers"
              />
              <label class="form-check-label" for="numbers">
                Pour the numbers potion?<br />
                <span class="text-muted">
                  (creates a combination of lower-cased alphabets + numbers eg:
                  fjkhfda34j1h41)</span
                >
                <img src="./img/potion.png" alt="" />
              </label>
            </div>

            <!-- ---------------------------------------
            ---------------------------------------------------------- -->
            <!--  special chars -->
            <div class="form-check">
              <input
                class="form-check-input"
                type="checkbox"
                value=""
                id="specchars"
              />
              <label class="form-check-label" for="specchars">
                Pour the special characters potion?
                <br />
                <span class="text-muted">
                  (creates a combination of lower-cased alphabets + special
                  chars eg: afs@$£!sdfa)</span
                >
                <img src="./img/potion (1).png" alt="" />
              </label>
            </div>

            <!-- ---------------------------------------
            ---------------------------------------------------------- -->
            <!--  capital letters -->
            <div class="form-check">
              <input
                class="form-check-input"
                type="checkbox"
                value=""
                id="capitallett"
              />
              <label class="form-check-label" for="capitallett">
                Pour the capital letters potion?
                <br />
                <span class="text-muted">
                  (creates a combination of lower-cased alphabets + uppercased
                  latters eg: sfafaDFASFWG)</span
                >
                <img src="./img/potion (2).png" alt="" />
              </label>
            </div>

            <!-- ---------------------------------------
            ---------------------------------------------------------- -->
            <!-- length of password -->
            <div class="form-input">
              <label for="lengthofpass" class="form-label"
                >Length of password:</label
              >
              <input
                type="range"
                class="form-range"
                value="10"
                min="10"
                max="50"
                id="lengthofpass"
                oninput="this.nextElementSibling.value = this.value"
              />
              <output>10</output>
            </div>
          </div>
        </div>
        <!-- ---------------------------------------
            ---------------------------------------------------------- -->
        <!-- button -->
        <button
          type="button"
          class="btn btn-warning btn-md w-25 mx-auto text-light"
          id='gt-pass'
        >
          Dip it
          <img src="./img/bonfire.png" alt="" />
        </button>
        <h3 class="mt-5 text-center font-italic">
          <u> Your ultimate password is:</u>
        </h3>
        <p class="result text-center"></p>
      </div>
    </div>

    
    <script type="module" src="index.js" ></script>
  </body>
</html>
